<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0056)http://www.sohtanaka.com/web-design/examples/image-zoom/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka</title>
<style type="text/css">
body {
	font: Arial, Helvetica, sans-serif normal 10px;
	margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
	height: 360px;
	width: 910px;
	margin: -180px 0 0 -450px;
	top: 50%; left: 50%;
	position: absolute;
}
ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px;
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_view {
	float: left;
	padding: 9px 0;
	margin-left: -10px;
}
</style>
<script type="text/javascript" src="./images_hover/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px',
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px',
			height: '174px',
			padding: '20px'
		}, 200);

	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0',
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px',
			height: '100px',
			padding: '5px'
		}, 400);
});

//Swap Image on Click
	$("ul.thumb li a").click(function() {

		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		return false;
	});

});
</script>
</head>

<body>
<div class="container">
<ul class="thumb">
	<li><a href="./images_hover/main_image1.jpg"><img src="./images_hover/thumb1.jpg" alt=""></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image2.jpg"><img src="./images_hover/thumb2.jpg" alt="" class="" style="margin-top: 0px; margin-left: 0px; top: 0px; left: 0px; width: 100px; height: 100px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; "></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image3.jpg"><img src="./images_hover/thumb3.jpg" alt="" class="" style="overflow-x: hidden; overflow-y: hidden; margin-top: -0.8949254077755171px; margin-left: -0.9742012099221284px; top: 0.4428187317827863px; left: 0.4428187317827863px; width: 100.71094462508047px; height: 100.71094462508047px; padding-top: 4.951963201008076px; padding-right: 4.951963201008076px; padding-bottom: 4.951963201008076px; padding-left: 4.951963201008076px; "></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image4.jpg"><img src="./images_hover/thumb4.jpg" alt="" class="" style="margin-top: 0px; margin-left: 0px; top: 0px; left: 0px; width: 100px; height: 100px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; overflow-x: hidden; overflow-y: hidden; "></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image5.jpg"><img src="./images_hover/thumb5.jpg" alt="" class="" style="margin-top: 0px; margin-left: 0px; top: 0px; left: 0px; width: 100px; height: 100px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; overflow-x: hidden; overflow-y: hidden; "></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image6.jpg"><img src="./images_hover/thumb6.jpg" alt="" class="" style="overflow-x: hidden; overflow-y: hidden; margin-top: -77.23889775408098px; margin-left: -77.23889775408098px; top: 35.10858988821863px; left: 35.10858988821863px; width: 152.22603126838902px; height: 152.22603126838902px; padding-top: 1.471214103487228px; padding-right: 1.471214103487228px; padding-bottom: 1.471214103487228px; padding-left: 1.471214103487228px; "></a></li>
	<li><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image7.jpg"><img src="./images_hover/thumb7.jpg" alt=""></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image8.jpg"><img src="./images_hover/thumb8.jpg" alt="" class="" style="margin-top: 0px; margin-left: 0px; top: 0px; left: 0px; width: 100px; height: 100px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; overflow-x: hidden; overflow-y: hidden; "></a></li>
	<li style="z-index: 0; "><a href="http://www.sohtanaka.com/web-design/examples/image-zoom/main_image9.jpg"><img src="./images_hover/thumb9.jpg" alt="" class="" style="overflow-x: hidden; overflow-y: hidden; margin-top: -10.308757786579132px; margin-left: -10.308757786579132px; top: 4.726351503868326px; left: 4.517637975919724px; width: 106.03249422715957px; height: 106.03249422715957px; padding-top: 0.6910755520288767px; padding-right: 0.6910755520288767px; padding-bottom: 0.6910755520288767px; padding-left: 0.6910755520288767px; "></a></li>
</ul>
<div id="main_view">
	<a href="http://www.designbombs.com/" title="Design Bombs - Web Gallery" target="_blank"><img src="./images_hover/main_image1.jpg" alt=""></a><br>
	<small style="float: right; color: #999;">Tutorial by <a style="color: #777;" href="http://www.sohtanaka.com/">Soh Tanaka</a></small>
</div>
</div>




</body></html>